
<template>
  <div>
    <Modal
      v-model="showBox"
      title="请裁切图片大小"
      :footer-hide="true"
      :mask-closable="false"
      @on-visible-change="vChange"
      class-name="vertical-center-modal"
      width="382"
    >
      <vueCropper
        style="height:350px;"
        class="marginB20"
				ref="cropper"
				:img="inImg"
				:outputSize="0.85"
				:outputType="'png'"
        :autoCrop="true"
        :mode="'cover'"
        :enlarge="1"
        :autoCropWidth="320"
        :autoCropHeight="320"
			></vueCropper>

      <div class="cRed marginB20 textCenter">
        提示：<span class="f_bold">滚动、拖拽鼠标，可以进行图片裁切。</span>
      </div>
		
      <Button type="default" class=" marginR10" size="large"  @click="rotateLeft">
        <i class="iconfont iconrotateleft " style="font-size:19px;"></i>
      </Button>
      <Button type="default" class="" size="large"  @click="rotateRight">
        <i class="iconfont iconyouxuanzhuan " style="font-size:20px;"></i>
      </Button>

      <Button type="primary" class=" pullRight" size="large" style="width:220px;" @click="finalImgFun">确 定</Button>
    </Modal>


    <Modal
      v-model="showBoxSs"
      title="请选择搜索内容"
      :footer-hide="true"
      :mask-closable="false"
      @on-visible-change="pChange"
      class-name="vertical-center-modal"
      width="500"
    > 
      <div v-show="$app.judgeData(tm_txt)">
        <div class="f_16 f_bold marginB10">文字识别</div>
        <div class="marginB20" :style="'overflow-y:auto;max-height:'+($app.winHeight-400)+'px;' ">
          <Button :type="tm_txtOk==val?'primary':'default'" :ghost="tm_txtOk==val" class="marginR10 marginB10" v-for="(val,i) in tm_txt" :key="'wr'+i" @click="toWr(val)">
            {{val}}
          </Button>
        </div>  
      </div>
      
      <div class="f_16 f_bold marginB10">图片识别</div>
      <img
        :src="tm_img" 
        class="pointer" 
        style="max-width:200px; padding:5px; border:1px solid #dcdee2; border-radius:4px;"
        :style="'border-color:'+(tm_imgOk?'#5887ef;':'#dcdee2;')"
        @click="twxR"
      >
      <Button type="primary" class="absolute" style="right:16px;bottom:16px;" @click="towHi">确 定</Button>
    </Modal>


  </div>
</template>



<script>
import Vue from "vue";

// 图片自由裁切
import VueCropper from 'vue-cropper' 
Vue.use(VueCropper);

export default {
  name: "cutImg",
  components: {},
  data() {
    let data = {
      inImg:'',
      str:'',//搜索出来的结果

      //识别出来后的结果
      tm_txt:[],
      tm_txtOk:'',
      tm_img:'',
      tm_imgOk:false,

    };
    let tool = {
      // 弹框是否显示
      showBox: false,
      showBoxSs:false,//第二次的弹框
    };
    return Object.assign(data, tool);
  },
  watch:{
    iImg(newVal,oldVal){
      console.log('iImg = ',newVal,oldVal)
    }
  },
  created() {},
  methods: {
    
    //向左边旋转90度
    rotateLeft(){
      this.$refs['cropper'].rotateLeft()
    },
    rotateRight(){
      this.$refs['cropper'].rotateRight()
    },
    finalImgFun() {

      // 获取截图的base64 数据
      this.$refs['cropper'].getCropData((okImg) => {
        $app.loading();
        //1营业执照,2专利文件,3身份证,4外观设计图片,5外观说明文件,6软著文件,7美术著作文件,8商标文件,
        //9商标导入文件-xls,10专利补正文件,11专利oa文件,12专利打包文件(zip/rar),13专利委托书,
        //14企业头像,15商标委托书,16商标注册个体户身份证,17商标注册企业营业执照(pdf),18专利oa时上传对照书(word)
        //19专利导入文件,20商标图片检索
        $app.selectFileImage(null,null,okImg,20,resData=>{
          let {
            file_url,
            tm_txt
          }=resData;

          // 文字列表为空
          if(!$app.judgeData(tm_txt)){
            this.tm_imgOk=true; //图片默认，一定active
          }
          

          this.str=JSON.stringify(resData);

          this.showBox=false;//关闭本弹框

          this.tm_txt=tm_txt;
          this.tm_img=file_url;
          this.showBoxSs=true;

        });
      })

    },

    otrw(){
      let {
        str
      }=this;
      this.$emit('tmCutFun',str);//触发父级的方法
    },
    

    //点击图片
    twxR(){
      this.tm_txtOk='';
      this.tm_imgOk=true;
    },

    //点击文字
    toWr(text){
      this.tm_txtOk=text;
      this.tm_imgOk=false;
    },

    //点击确定
    towHi(){
      let {
        tm_txtOk,
        tm_imgOk,
        $route,
        $route:{
          name
        }
      }=this;
      if(!$app.judgeData(tm_txtOk) && !$app.judgeData(tm_imgOk)){
        $app.alert('请选择要搜索的文字或图片');
      }else{
        this.showBoxSs=false;
        this.showBox=false;

        setTimeout(()=>{
          if($app.judgeData(tm_imgOk)){//搜索图片
            this.otrw();
          }else{//搜索文字
            $app.closeHadPage('Trademarklists', () => {
              if(name=='searchTmPt'){
                $app.closeTag($route); // 关闭指定页面
              }
              // 页面跳转
              this.$router.push({
                name: 'Trademarklists',
                query: {
                  query_key:tm_txtOk,
                  type:1,
                }
              });
            })

          }
        },189);

        
      }
    },

    //

    //弹框消失
    vChange(buEr) {
      if (!buEr) {//关闭
        //初始化数据
        this.inImg='';
      } else {//显示
        this.str='';
      }
    },
    pChange(buEr){
      if (!buEr) {//关闭
        setTimeout(()=>{
          //初始化数据
          this.tm_txt=[];
          this.tm_txtOk='';
          this.tm_img='';
          this.tm_imgOk=false;
          this.str='';
        },200);
        
      } else {//显示

      }
    }
  }
};
</script>
